<!DOCTYPE html>
<html lang="cn" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue案例</title>
    <style>
    
    </style>

</head>
<body>
    <div id="app">

        文章分类:<input type="text" v-model="searchCondition.category"/><span>{{searchCondition.category}}</span>&nbsp;
        发布状态:<input type="text" v-model="searchCondition.state"/><span>{{searchCondition.state}}</span>&nbsp;
        <button v-on:click="search">搜索</button>
        <button v-on:click="reset">重置</button>
        <hr>
        <table border="5px solid" colspa="0" cellspacing="0">
            <tr>
                <th>标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <!--哪个元素出现多次,v-for就添加在哪个元素上-->
            <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr> 
            <tr>
                <td>标题1</td>
                <td>分类1</td>
                <td>时间1</td>
                <td>状态1</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr> 
            <tr>
                <td>标题1</td>
                <td>分类1</td>
                <td>时间1</td>
                <td>状态1</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>

    <!-- 导入axios的js文件 -->
     <script src="https://unpkg.com/axios/dist/axios/min/js"></script>
    <!--引入vue模块-->
    <script type="module">
        import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        /*创建vue应用实例*/
        createApp({
            data(){
                return{
                    articleList:[],
                    searchCondition:{
                        category:'',
                        state:''
                    }
                }
            },
            methods:{
                reset:function(){
                    //在methods对应的方法里面,使用this就代表vue实例,可以使用this获取到vue实例中准备的数据
                    this.searchCondition.category=''
                    this.searchCondition.state=''
                },
                search:function(){
                    //发送请求，完成搜索，携带搜索条件
                    axios.get('http://localhost:8080/article/search?category='+this.searchCondition.category+'&state='+this.searchCondition.state)
                    .then(result=>{
                        //成功回调result.data
                        //把得到的数据赋值给articleList
                        this.articleList=result.data
                    }).catch(err=>{
                        cosole.log(err)
                    })
                }
            },
            //钩子函数mounted中,获取所有文章数据
            mounted:function(){
                console.log("vue挂载完毕,发送请求数据")
                //发送异步请求 axios
                axios.get('http://localhost:8080/article/getAll').then(result=>{
                    //成功回调
                    console.log(result.data);
                    this.articleList=result.data;
                }).catch(err=>{
                    //失败回调
                    console.log(err);
                })
            }
        }).mount('#app')
    </script>
</body>
</html>